<template>
    <div class="app" >
    <a-card title="玩家" class="card">
      <van-list v-model:loading="state.loading" :finished="state.finished" finished-text="没有更多了" @load="onLoad" style="margin-top: 16px;">
      <van-cell v-for="(item) in state.list" :key="item" :title="`玩家名： ${item.username}`" style="margin-top: 5px;" >
        <van-button type="primary" style="margin: 10px;" :name="item.username" @click="getHistory">结果</van-button>
      </van-cell>
    </van-list>
    <van-button round block type="primary" @click="nextDraw" style="margin-top: 16px;">下一步接龙</van-button>
    
    </a-card>
    </div>
  </template>
  
  <script>
  import {  defineComponent, reactive,computed} from 'vue';
  import store from '@/store';
  import socket from '@/socket';
  export default defineComponent({
    name: 'App',
    components: {
    },
    setup(){
      const state = reactive({
        list: computed(() => store.state.room.users),
        num : 0,
        wordnum : 0,
        drawnum : 0
        });
        console.log(state.list)
        const onLoad = () => {
            state.loading = false;
        };
        const getHistory = (e) => {
          state.num=0
          store.state.history = ''
          const username = e.target.getAttribute('name')
          socket.emit('get_history',store.state.room.roomnum,username)
          state.num = 0
          state.wordnum = 0
          state.drawnum = 0
          store.state.lines = []
        }
        const nextDraw = () => {
          state.num++
          if(state.num>state.list.length+1){
            store.state.lines = []
            store.state.history = '以上是全部历史'
          }
          else if(state.num==1){
            store.state.lines = []
            store.state.history = '起始词是'+store.state.historywords[state.wordnum++]
          }
          else if(state.num%2==0){
            store.state.history = '被绘制为'
            store.state.lines = store.state.historydraws[state.drawnum++]
          }
          else if(state.num%2==1){
            store.state.lines = []
            store.state.history = '被猜测为'+store.state.historywords[state.wordnum++]
          }
        }
      return {
        state,
        onLoad,
        getHistory,
        nextDraw
      }
    }
  })
  </script>
  
  <style>
  .app {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
  }
  
  .card{
    width: 300px;
    margin-top: 20px;
  }
  
  .input {
    margin-right: 10px;
    width: 20px;
  }
  
  .button {
    margin-top: 10px;
    width: 100px;
  }
  </style>